import 'package:flutter/material.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/common/qxp_style.dart';
import 'package:full_display/page/clouds/component/clouds_item.dart';
import 'package:full_display/page/clouds/component/device_list.dart';
import 'package:full_display/page/clouds/component/pop_menus.dart';
import 'package:full_display/provide/button_list_provider.dart';
import 'package:full_display/unit/asset_utils/asset_utils.dart';
import 'package:full_display/unit/screen/screen_util1.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:full_display/unit/widgets/widget_button_list.dart';
import 'package:provider/provider.dart';

class CloudsAddClusterPage extends StatefulWidget {
  const CloudsAddClusterPage({super.key});

  @override
  State<CloudsAddClusterPage> createState() => _CloudsAddClusterPageState();
}

class _CloudsAddClusterPageState extends State<CloudsAddClusterPage> {
  TextEditingController nameController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorPlate.background,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: ColorPlate.background,
        elevation: 0,
        title: Center(
          child: Text(
            '新建集群',
            textAlign: TextAlign.center,
            style: StandardTextStyle.textWhite16BoldStyle,
          ),
        ),
        leading: IconButton(
          icon: Image.asset(
              height: 20.0.H, width: 20.0.W, AssetUtils.getAsset2Image("back")),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        actions: [
          TextButton(
            child: Text(
              '保存',
              textAlign: TextAlign.center,
              style: StandardTextStyle.textWhite14BoldStyle,
            ),
            onPressed: () {},
          ),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0.W),
        child: Center(
          child: Column(
            children: [
              Container(
                decoration: const BoxDecoration(
                  color: ColorPlate.backgroundOpacity5,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
                height: 56.0.H,
                width: ScreenUtil1.screenWidth - 40.0.W,
                child: Container(
                  margin: EdgeInsets.only(left: 20.0.H),
                  height: 50.0.W,
                  child: TextField(
                    cursorHeight: 20,
                    style: const TextStyle(color: Colors.white),
                    controller: nameController,
                    decoration: InputDecoration(
                      hintText: "请输入集群名称",
                      hintStyle: StandardTextStyle.textWhite16BoldOp50Style,
                      enabledBorder: const UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: ColorPlate.backgroundOpacity0),
                      ),
                      focusedBorder: const UnderlineInputBorder(
                        borderSide:
                            BorderSide(color: ColorPlate.backgroundOpacity0),
                      ),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.0.H),
                padding: EdgeInsets.only(left: 20.0.H, right: 20.0.H),
                decoration: const BoxDecoration(
                  color: ColorPlate.backgroundOpacity5,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
                height: 56.0.H,
                width: ScreenUtil1.screenWidth - 40.0.W,
                child: InkWell(
                  onTap: () {
                    print("++++++");
                    PopMenus.showPop(
                        context: context,
                        listData: [
                          {'title': 'X3', 'img': ''},
                          {'title': 'X4', 'img': ''},
                          {'title': 'Z55', 'img': ''},
                          {'title': 'M6', 'img': ''},
                          {'title': 'M7', 'img': ''}
                        ],
                        selText: "M6",
                        isImg: false,
                        itemHeight: 50.0.H,
                        itemWidth: ScreenUtil1.screenWidth - 40.0.W,
                        topH: ScreenUtil1.statusBarHeight + 182.0.H,
                        leftP: 20.0.W,
                        trianglePosition:
                            (ScreenUtil1.screenWidth - 60.0.W) / 2.0,
                        clickCallback: (int index, Map value) {
                          print("++++++");
                        });
                  },
                  child: Container(
                    width: ScreenUtil1.screenWidth - 40.0.W,
                    height: 56.0.H,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "M1",
                          textAlign: TextAlign.center,
                          style: StandardTextStyle.textWhite16BoldStyle,
                        ),
                        Image.asset(
                            height: 20.0.H,
                            width: 20.0.W,
                            AssetUtils.getAsset2Image("down")),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(top: 30.0.H),
                  child: DeviceList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
